<template>
  <div class="news-main">

    <el-card class="news-main card" shadow="hover">
      <div slot="header" class="clearfix">
        <span>搜索栏</span>
      </div>
      <el-row :guttar="20">
        <el-col :span="6">
          <el-input  placeholder="根据作者进行查询" v-model="page.author"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input  placeholder="根据文章标题进行查询" v-model="page.title"></el-input>
        </el-col>

         <el-col :span="6" >
          <el-button >重置</el-button>
          <el-button type="primary" @click='find'>查询</el-button>
        </el-col>
      </el-row>
     

    </el-card>
    <el-card class="news-main card" shadow="never" border="none">
      <div slot="header" class="clearfix">
        <el-button type="primary" size="small" @click="add">新增图文</el-button>
      </div>
      <el-table :data="newsList" border style="width: 100%">
      <el-table-column
        fixed
        label="序号"
        type="index"
        width="50"
      ></el-table-column>
      <el-table-column  prop="addTime" label="添加时间" width="150">
      </el-table-column>
      <el-table-column prop="author" label="作者" width="100"> </el-table-column>
      <el-table-column prop="content1" label="内容1" width="200">
      </el-table-column>
      <el-table-column prop="content2" label="内容2" width="200"> </el-table-column>
      <el-table-column prop="desc" label="描述" width="200">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="120"> </el-table-column>

      <el-table-column  label="封面图" width="80"> 
         <template slot-scope="scope">
           <img :src="scope.row.cover" alt="">
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >删除</el-button>
          <el-button type="text" size="small"  @click="edit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-card>

    <div class="block">
          <!-- <span class="demonstration">分页</span> -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.start"
            :page-sizes="page.sizes"
            :page-size="page.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount"
          >
          </el-pagination>
        </div>
    
    <!-- <el-button type="primary" size="default" @click="add">新增图文</el-button>
    <el-button type="primary" size="default" @click="edit(123)"
      >编辑图文</el-button
    > -->
  </div>
</template>

<script>
import { newsList,delList } from "@/api/material/news"
export default {
  data() {
    return {
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
        author:'',
        title:''
      },
      newsList:[],
    };
  },
  methods: {
    add() {
      this.$router.push({ name: "materialNewsAdd" });
    },
    edit(id) {
      console.log(id);
      this.$router.push({ name: "materialNewsEdit", params: { id } });
    },
    // 分页
     handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.limit = val;
      this.getnewsList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.start = val;
      this.getnewsList();
    },
     // 新闻列表
    getnewsList(){
      newsList({
        limit:this.page.limit,
        start:this.page.start,
        title:this.page.title,
        author:this.page.author
      }).then(res => {
        console.log(res);
        this.page.totalCount = res.data.totalRow;
        this.newsList = res.data.list;
      })
    },
    // 删除
    handleClick(row) {
      console.log(row);
      this.$confirm("确认删除？")
        .then((_) => {
          delList({
            id: row.id,
          }).then((res) => {
            console.log(res);
            this.$message.success("删除成功");
            this.getnewsList();
            console.log(1);
          });
          console.log(2);
          // this.dialog = false;
        })
        .catch((_) => {});
    },
    // 查询
    find(){
      this.page.start = 1;
      this.getnewsList();
    },
    // 重置
    // reset(){
    //   this.getnewsList();
    // }
  },
  created() {
    // 新闻列表
      this.getnewsList();
      
  }
};
</script>

<style lang="scss" scoped>
  .card{
    margin:30px;
    img{
      width:50px;
      height: 30px;
    }
  }
  .block {
  margin-top: 20px;
  text-align: right;
}
.el-col {
  padding: 10px;
}

</style>
